<template>
	<view class="login">
		<view class="login_top" style="background: url('../../static/home/img_kjdl.png') no-repeat center;
		background-size: cover;">
			<image src="../static/logo.png" mode="widthFix"></image>注册!
		</view>
		<view class="login_content">
			<view class="login_title">快捷注册</view>
			<view class="login_item">
				<view class="login_phone">+86</view>
				<input type="text" name="" v-model="phone" placeholder="请输入手机号">
			</view>
			<view class="login_item">
				<!-- <view class="login_phone">+86</view> -->
				<input type="text" name="" v-model="password" placeholder="请输入密码">
			</view>
			<!-- 	<view class="login_item">
				<input type="text" name="" v-model="code" placeholder="请输入验证码">
				<view :class="{ login_count: !isDisabled, disabled: isDisabled }" @click="handleClick">
					{{count}}
				</view>
			</view> -->
		</view>
		<!--  -->
		<view class="btn" @click="onsubmit">
			注册
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	export default {
		data() {
			return {
				count: '获取验证码',
				isDisabled: false, // 控制点击状态
				countdown: 60, // 倒计时时间
				timer: null, // 定时器
				phone: '',
				code: '',
				password: ''
			}
		},
		beforeDestroy() {
			// 清理定时器
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			handleClick() {
				if (this.isDisabled) return; // 如果正在倒计时，返回

				this.isDisabled = true; // 禁用点击
				this.btn_msg = '验证码已发送'; // 更新提示信息
				// 开始倒计时
				this.startCountdown();

				// 这里可以添加获取验证码的请求逻辑，比如：
				// await request('/send-code', 'POST', { phone: this.phone });
			},
			startCountdown() {
				this.countdown = 60; // 重置倒计时
				this.count = `${this.countdown}秒后重发`;
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.timer);
						this.isDisabled = false; // 重新启用点击
						this.count = '获取验证码'; // 重置提示信息
					} else {
						this.count = `${this.countdown}秒后重发`;
					}
				}, 1000);
			},
			validatePhoneNumber(phone) {
				// 正则表达式：以1开头的11位数字（中国手机号格式）
				const phoneRegex = /^1[3-9]\d{9}$/;
				return phoneRegex.test(phone);
			},
			async onsubmit() {
				if (!this.phone) return uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				})
				try {
					const response = await request('/v1/login', 'POST', {
						phone: this.phone,
						password: this.password,
						
					},'register');
					if (response) {
						uni.setStorageSync("token", response.body.token)
						uni.showToast({
							title: '注册成功'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 800)
					}

				} catch (error) {
					console.error('请求失败:', error);
				}
			}
		}
	}
</script>

<style>
	.login_top {
		/* height: 508rpx; */
		display: flex;
		align-items: center;
		padding: 68rpx 64rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 44rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: left;
		font-style: normal;
		padding-bottom: 116rpx;
	}

	.login_top image {
		width: 320rpx;
		margin-right: 28rpx;
	}

	.login_content {
		background: #FFFFFF;
		border-radius: 52rpx 52rpx 0rpx 0rpx;
		margin-top: -92rpx;
		padding: 80rpx 64rpx;
	}

	.login_title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #333333;
		line-height: 56rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 93rpx;
	}

	.login_item {
		width: 100%;
		margin: 0 auto;
		height: 100rpx;
		background: #F4F4F4;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		line-height: 100rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-bottom: 32rpx;
	}

	.login_phone {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		/* line-height: 44rpx; */
		/* text-align: right; */
		font-style: normal;
		/* position: relative; */
	}

	.login_phone::after {
		content: '';
		width: 2rpx;
		height: 32rpx;
		border: 1px solid #dadada;
		margin: 0 14rpx;
	}

	.login_item input {
		width: 70%;
		height: 80rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		background-color: #f4f4f4;
		font-style: normal;
	}

	.login_count {
		width: 30%;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #1890FF;
		text-align: right;
		text-align: center;
		font-style: normal;
	}

	.disabled {
		color: gray;
		/* 倒计时时的字体颜色 */
		width: 30%;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		text-align: right;
		text-align: center;
		font-style: normal;
	}

	.btn {
		width: 80%;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 140rpx;
		background: linear-gradient(141deg, #57A4FF 0%, #2C6BFE 100%);
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		font-style: normal;
	}
</style>